Disruptive Conversations

Odds are, if you are looking at this page today in Firefox, you're seeing a nice little horizontal navigation bar at the top of the page underneath the banner.  If you are looking at this page today in IE7... well... you are probably wondering what navigation bar I am talking about!

You see... I'm experimenting with a navigation bar at the top of the page just underneath the banner so that as I move from a single blog into a network of topic-specific blogs, I'd like readers (and myself) to be able to easily move between them.  Armed with the excellent tutorial over on Typepadhacks.org, I've been experimenting with TypePad's advanced templates.  If you look over at the top of Disruptive Telephony, you'll see that I'm using the "Overlapping horizontal tabs" style found at the excellent DynamicDrive CSS Library.  It's all done with Cascading Style Sheets (CSS) and a few little images.  Pretty fun stuff.

However, I thought that I'd try another style as well to see how it works.  So I tried the "Shade Image" style for comparison.  The result, in Firefox, is quite nice (click for a larger image):

However, if you take a look at it in Internet Explorer (I've now tried either IE6 or IE7), you get this:

Not exactly what we're looking for!  Now, the "overlapping horizontal tabs" menu looks okay in IE, although the horizontal line annoyingly doesn't line up with the bottom of the tabs, so that may be the one I use for the other blogs - or I may try some of the other styles.

I do like the "Slanted Divider" menu and the "Chrome" menu bar isn't bad either, but neither of those shows you visibly which blog you are on.  That's what I liked about these other two - it was very easy to see which menu choice you are on.

Just too bad that the CSS for that menu bar works so nicely in Firefox looks so poor in MSIE!